<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <title>我的博客</title>
	<link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}" />
	<link rel="stylesheet" th:href="@{/css/master.css}" />
	<link rel="stylesheet" th:href="@{/css/gloable.css}" />
	<link th:href="@{/css/index_style.css}" rel="stylesheet" type="text/css">
	<link rel="stylesheet" th:href="@{/css/nprogress.css}" />
    <link rel="stylesheet" th:href="@{/css/blog.css}" />
</head>
<body>
    <div class="header">
    </div>
	<header th:replace="common :: header"/>
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
		    <div class="col-content">
		        <div class="inner">
		            <article class="article-list bloglist" id="LAY_bloglist" >
						<section th:each="blog : ${page.list}" class="article-item zoomIn article">
							<div th:if="${blog.recommend == 1}" class="fc-flag">置顶</div>
							<h5 class="title">       
								<span th:if="${blog.appreciation == 1}" class="fc-blue">【原创】</span>
								<a th:href="@{/blog/read/{id}(id=${blog.id})}" th:text="${blog.title}"></a>
							</h5>   
							<div class="time">
								<span class="day" style="height: 35px" th:text="${blogStat.index + 1}"> </span>
								<!--<span class="month fs-18">7<span class="fs-14">月</span></span>  -->
								<span class="year fs-18 ml10" th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
							</div>   
							<div class="content">       
								<a th:href="@{/blog/read/{id}(id=${blog.id})}" class="cover img-light">
									<img th:if="${blog.url != ''}" th:src="${blog.url}">
									<img th:if="${blog.url == ''}" th:src="@{/img/a.jpg}">
								</a>
								<p th:text="|${blog.description}......|"></p>
							</div>
							<div class="read-more">       
								<a th:href="@{/blog/read/{id}(id=${blog.id})}" class="fc-black f-fwb">继续阅读</a>
							</div>    
							<aside class="f-oh footer">       
								<div class="f-fl tags">           
									<span class="fa fa-tags fs-16"></span>           
									<a th:each="tag : ${blog.tags}" th:text="${tag.name}" class="tag"></a>
								</div>       
								<div class="f-fr">           
									<span class="read">               
										<i class="fa fa-eye fs-16"></i>               
										<i class="num" th:text="${blog.views}"></i>
									</span>           
									<span class="ml20">               
										<i class="fa fa-comments fs-16"></i>               
										<a href="javascript:void(0)" class="num fc-grey" th:text="${blog.shareStatement}"></a>
									</span>       
								</div>   
							</aside>
						</section>

		            </article>
					<div id="test1"></div>
		        </div>
		    </div>
		    <div class="col-other">
		        <div class="inner">
					<div class="other-item" id="categoryandsearch">
						<h5 class="other-item-title">分类</h5>
			    		<ul class="category mt20" id="category">
				        	<li data-index="0" class="slider"></li>
				        	<li data-index="1"><a th:href="@{/blog/article}">全部文章</a></li>
				            <li th:data-index="${typeStat.index+2}" th:each="type : ${types}"><a th:href="@{/blog/type/{id}(id=${type.id})}" th:text="|${type.name}(${type.num})|"></a></li>

			    		</ul>
					</div>
					<!--右边悬浮 平板或手机设备显示-->
					<div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
					<div class="article-category">
					    <div class="article-category-title">分类导航</div>
					            <a th:each="type : ${types}"  th:href="@{/blog/type/{id}(id=${type.id})}" th:text="|${type.name}(${type.num})|"></a>
					    <div class="f-cb"></div>
					</div>
					<!--遮罩-->
					<div class="blog-mask animated layui-hide"></div>
					<div class="other-item">
					    <h5 class="other-item-title">热门文章</h5>
					    <div class="inner">
					        <ul class="hot-list-article">
					                <li th:each="h : ${hotBlogs}"> <a  th:href="@{/blog/read/{id}(id=${h.id})}" th:text="${h.title}"></a></li>
					        </ul>
					    </div>
					</div>
					<div class="other-item">
					    <h5 class="other-item-title">置顶推荐</h5>
					    <div class="inner">
					        <ul class="hot-list-article">
					                <li th:each="r : ${recommendBlogs}"> <a  th:href="@{/blog/read/{id}(id=${r.id})}" th:text="${r.title}"></a></li>

					        </ul>
					    </div>
					</div>
		        </div>
		    </div>
		</div>
    </div>

<!--	<div class="container">
		<div class="demo">
			<div class="snowwrap">
				<div class="snow-container"></div>
			</div>

			<style type='text/css'>
				.snowwrap,.snow-container{position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100001;}
			</style>
			<script th:src="@{/js/jquery.min.js}"></script>
			<script th:src="@{/js/plugins/snow.js}"></script>
		</div>
	</div>-->


	<footer th:replace="common :: footer"/>
	<script th:src="@{/layui/layui.js}"></script>
	<script th:src="@{/js/yss/gloable.js}"></script>
	<script th:src="@{/js/plugins/nprogress.js}"></script>
    <script>
		var page_count = [[${page.total}]];
		var page_curr = [[${page.pageNum}]];
		NProgress.start();
	</script>
 	<script th:src="@{/js/article.js}"></script>
    <script>

        window.onload = function () {
            NProgress.done();
        };
    </script>
</body>
</html>
